
<template>
  <div>
    <div class="table_wrap">
      <div class="table_title">
        <i class="el-icon-platform-eleme"></i>
        <div>学员管理</div>
      </div>
      <el-table :data="courseList"
                border
                style="width:100%;">
        <el-table-column prop="Cname"
                         label="课程名称"
                         width="180">
        </el-table-column>
        <el-table-column prop="Cnumber"
                         label="课程代号"
                         width="180">
        </el-table-column>
        <el-table-column prop="onlineUser"
                         label="在学人数"
                         width="180">
        </el-table-column>
        <el-table-column label="编辑日期"
                         width="180">
          <template slot-scope="scope">
            <div>
              {{new Date(scope.row.upDateAt).toLocaleString()}}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="状态"
                         width="160">
          <template slot-scope="scope">
            <div>
              {{scope.row.isState==1? "草稿":scope.row.isState==2?"上架":"下架"}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop=""
                         label="操作"
                         width="390">
          <template slot-scope="scope">
            <div>
              <el-button @click="changeState(scope.row.ID)"
                         :type="scope.row.isState==1?'warning':scope.row.isState==2?'success':'primary'">{{scope.row.isState==1?"上架":scope.row.isState==2?"下架":"草稿"}}</el-button>
              <el-button type="success"
                         @click="turnCourseEdit(scope.row._id,scope.row.ID)">编辑</el-button>
              <el-button type="danger"
                         @click="del(scope.row._id,scope.row.ID)">删除</el-button>
              <el-button @click="isTop(scope.row.ID)"
                         type="info">{{scope.row.isTop?'取消置顶':'置顶'}}</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="page_wrap">
        <el-button type="success"
                   @click="goTop">首页</el-button>
        <el-pagination background
                       :total="total"
                       :pageSize="pageSize"
                       :current-page="pageStart"
                       layout="prev,pager,next"
                       @current-change="pageChange">
        </el-pagination>
        <el-button type="primary"
                   @click="goEnd">尾页</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters, mapActions, mapMutations } from 'vuex'
import { changeStateApi, delCourseApi, isTopApi } from '../../api/course'
export default {
  name: "courseTable",
  created () {
    this.getCourseAction({ pageStart: this.pageStart }) //默认获取第一页数据
  },
  methods: {
    ...mapActions("courseStore", ["getCourseAction"]),
    ...mapMutations("courseStore", ["changePage"]),
    turnCourseEdit (_id, ID) { //跳转课程编辑页
      this.$router.push({
        name: "courseAdd",
        params: {
          CID: ID,
          c_id: _id
        }
      })
    },
    async changeState (ID) { //上架下架 功能
      var res = await changeStateApi(ID)
      console.log(res)
      this.getCourseAction({ pageStart: this.pageStart }) //从新加载列表
    },
    async del (_id, ID) { //删除课程
      var res = await delCourseApi(_id, ID)
      console.log(res)

      this.$alert("删除成功")
      this.getCourseAction({ pageStart: this.pageStart }) //从新加载列表

    },
    async isTop (ID) { //置顶课程
      var res = await isTopApi(ID)
      console.log(res)
      this.$alert("更新成功")
      this.getCourseAction({ pageStart: this.pageStart }) //从新加载列表
    },
    pageChange (val) {//分页改变事件
      this.changePage(val)
      this.getCourseAction({ pageStart: val })//获取当前页码的数据
    },
    goTop () { //去首页
      this.changePage(1)
      this.getCourseAction({ pageStart: 1 })
    },
    goEnd () { //去尾页
      this.changePage(this.endPage)
      this.getCourseAction({ pageStart: this.endPage })
    }
  },
  computed: {
    ...mapGetters("courseStore", ["courseList", "pageSize", "total", "pageStart", "endPage"])
  }
}
</script>
<style lang="less" scoped>
.table_wrap {
  width: 1300px;
  margin: 10px auto;
  background: white;
  .table_title {
    height: 40px;
    line-height: 40px;
    display: flex;
    border: 1px solid black;
    i {
      width: 40px;
      height: 40px;
      border-right: 1px solid black;
      font-size: 40px;
    }
    div {
      margin-left: 30px;
    }
  }
}
.page_wrap {
  width: 1300px;
  margin: 10px auto;
  display: flex;
  .el-button {
    height: 28px;
    line-height: 4px;
  }
}
</style>